<!--添加招聘信息组件-->
<template>
  <div class="Home">
    <div class="rightmain">
      <div class="top"><h1>招聘信息发布</h1></div>
      <div class="rightmainbody">
        <div class="rightmaintext">
          <div class="rightmaintextleft">职位名称*:</div>
          <div class="rightmaintextright">
            <el-input v-model="submitInfo.title" placeholder=" "></el-input>
          </div>
        </div>
        <div class="rightmaintext">
          <div class="rightmaintextleft">发布时间:</div>
          <div class="rightmaintextright">
            <el-input
            @blur="isDate(submitInfo.releaseTime)"
              v-model="submitInfo.releaseTime"
              placeholder="例如：2018-09-02"
            ></el-input>
              <!-- @keyup.enter.native="isDate(submitInfo.releaseTime)" -->
            <!-- <el-date-picker v-model="submitInfo.releaseTime" type="date" placeholder="选择日期"></el-date-picker> -->
          </div>
        </div>
        <div class="rightmaintext">
          <div class="rightmaintextleft">职位详情*:</div>
        </div>
      </div>
      <div class="rightmiddle">
        <div id="editor"></div>
      </div>
      <div class="rightfooter">
        <el-button round @click="submit">发布</el-button>
      </div>
    </div>
    <!-- </div> -->
    <!-- </div> -->
  </div>
</template>

<script>
import E from 'wangeditor';
export default {
  name: 'addinfo',
  data() {
    return {
      editor: '',
      submitInfo: {},
    };
  },
  mounted() {
    var that = this;
    this.editor = new E('#editor');
    this.editor.customConfig.onchange = function (text) {
      that.submitInfo.content = text;
    };
    this.editor.customConfig.uploadImgServer =
      'http://dl.sword.ink:2335/upload/picture';
    //必要设置，值必须为“myfiles”
    this.editor.customConfig.uploadFileName = 'myfiles';
    // 图片最大体积为20MB
    this.editor.customConfig.uploadImgMaxSize = 20 * 1024 * 1024;
    //超时时间要设置长一点，否则大图片上传可能失败，默认为10秒，这里设置为30秒
    this.editor.customConfig.uploadImgTimeout = 30000;
    this.editor.create();
    this.editor.txt.html('<p>欢迎使用wangEditor编辑器</p>');
  },

  methods: {
    // $('el-input[name="time"]').change(),
    isDate(dateString) {
      console.log(dateString)
      if (dateString== undefined) return true;
      var r = dateString.match(/^(\d{1,4})(-|\/)(\d{1,2})\2(\d{1,2})$/);
      if (r == null) {
        alert(
          '请输入格式正确的日期格式：yyyy-mm-dd 例如：2008-08-08'
        );
        return false;
      }
      var d = new Date(r[1], r[3] - 1, r[4]);
      var num =
        d.getFullYear() == r[1] &&
        d.getMonth() + 1 == r[3] &&
        d.getDate() == r[4];
      if (num == 0) {
        alert(
          '请输入格式正确的日期格式：yyyy-mm-dd\n\r例 如：2008-08-08\n\r'
        );
      }
      return num != 0;
    },

    submit() {
      var that = this;
      console.log(this.submitInfo);
      let config = {
        headers: { 'Content-Type': 'application/json' },
      };
      this.$http
        .post('recruit', JSON.stringify(this.submitInfo), config)
        .then(({ data: res }) => {
          if (res.state !== true) return this.$message.error(res.msg);
          else {
            this.$message.success(res.msg);
          }
          console.log(res);
        });
    },
  },
};
</script>


<style scoped>
.Home {
  /* display: grid; */
  height: 80vh;
  width: 80vw;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  box-sizing: border-box;
  align-items: flex-end;
  /* grid-template-columns: 22% 78%; */
}
.rightmain {
  display: flex;
  flex-direction: column;
  background: #ffffff;
  border: 1px solid #777777;
  width: 100%;
  height: 100%;
  overflow: scroll;
}
::-webkit-scrollbar {display:none}
.top{
  width: 100%;
  height: auto;
  text-align: center;
}
.top h1{
  margin-top: 15px;
  margin-bottom: 0px;
  font-size: 25px;
  font-family: '宋体';
}
.rightmainbody {
  /* border: 1px solid #777777; */
  box-sizing: border-box;
  width: 50%;
  height: 25%;
  margin-left: 10%;
  margin-top: 3%;
}
.rightmaintext {
  display: flex;
  justify-content: flex-start;
  background: #ffffff;
  width: 100%;
  height: 31%;
}
.rightmaintextleft {
  background: #ffffff;
  font-size: 2.5vh;
  font-family: Microsoft YaHei, Microsoft YaHei-Normal;
  font-weight: Normal;
  text-align: left;
  color: #777777;
  box-sizing: border-box;
  width: 20%;
  height: 100%;
}
.rightmaintextright {
  background: #ffffff;
  box-sizing: border-box;
  margin-left: 8%;
  width: 70%;
  height: 80%;
}
.rightmiddle {
  min-width: 700px;
  width: 85%;
  height: 45%;
  margin-left: 10%;
  background: #ffffff;
  /* border: 1px solid #777777; */
  box-sizing: border-box;
  font-size: 2.5vh;
  font-family: Microsoft YaHei, Microsoft YaHei-Normal;
  font-weight: Normal;
  text-align: left;
  color: #777777;
}

.rightmiddle /deep/ .w-e-text-container {
  height: 163px !important;
}
.rightfooter {
  display: flex;
  justify-content: center;
  width: 100%;
  height: 8%;
  background: #ffffff;
  /* border: 1px solid #777777; */
  margin-top: 5%;
  font-size: 2.5vh;
  font-family: Microsoft YaHei, Microsoft YaHei-Normal;
  font-weight: Normal;
  text-align: center;
  color: #777777;
  /* line-height: 35px; */
}
img {
  width: 100%;
  height: 100%;
}
</style>
<style>
* {
  margin: 0;
  padding: 0;
}
.el-input__inner {
  height: 30px;
  background: #ffffff;
  border: 1px solid #777777;
  box-sizing: border-box;
  border-radius: 0px;
}
</style>



